<h2>Create Event Form</h2>
<form id="eventDetail-frm" name="eventDetailFrm" class="form-horizontal" role="form" novalidate>
	<div class="form-group">
		<label for="eventTitle" class="col-sm-2 control-label">Title</label>
		<div class="col-sm-10">
			<input id="eventTitle" name="eventTitle" type="text" class="form-control" placeholder="Title" ng-model='$ctrl.event.title' required />
			<span style="color:red;font-size:10px;" ng-show="eventDetailFrm.eventTitle.$touched && eventDetailFrm.eventTitle.$invalid && eventDetailFrm.eventTitle.$dirty">
				<span ng-show="eventDetailFrm.eventTitle.$error.required">Event title required.</span>
			</span>
		</div>
	</div>
	<div class="form-group">
		<label for="eventDesc" class="col-sm-2 control-label">Description</label>
		<div class="col-sm-10">
			<textarea id="eventDesc" name="eventDesc" class="form-control" rows="3" placeholder="Description" ng-model='$ctrl.event.description'></textarea>
		</div>
	</div>
	<div class="form-group">
		<label for="eventStart" class="col-sm-2 control-label">Start</label>
		<div class="col-sm-10">
			<input id="eventStart" name="eventStart" class="form-control datePicker" ng-model='$ctrl.event.startStr' required />
			<span style="color:red;font-size:10px;" ng-show="eventDetailFrm.eventStart.$touched && eventDetailFrm.eventStart.$invalid && eventDetailFrm.eventStart.$dirty">
				<span ng-show="eventDetailFrm.eventStart.$error.required">Event start date required.</span>
			</span>
		</div>
	</div>
	<div class="form-group">
		<label for="eventEnd" class="col-sm-2 control-label">End</label>
		<div class="col-sm-10">
			<input id="eventEnd" name="eventEnd" class="form-control datePicker" ng-model='$ctrl.event.endStr' required />
			<span style="color:red;font-size:10px;" ng-show="eventDetailFrm.eventEnd.$touched && eventDetailFrm.eventEnd.$invalid && eventDetailFrm.eventEnd.$dirty">
				<span ng-show="eventDetailFrm.eventEnd.$error.required">Event end date required.</span>
			</span>
		</div>
	</div>
	<div class="form-group">
		<label for="eventOwner" class="col-sm-2 control-label">Owner</label>
		<div class="col-sm-10">
			<input id="eventOwner" name="eventOwner" class="form-control" placeholder="Owner" ng-model='$ctrl.event.owner' required />
			<span style="color:red;font-size:10px;" ng-show="eventDetailFrm.eventOwner.$touched && eventDetailFrm.eventOwner.$invalid && eventDetailFrm.eventOwner.$dirty">
				<span ng-show="eventDetailFrm.eventOwner.$error.required">Event owner required.</span>
			</span>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button id="submit-btn" type="button" class="btn btn-primary"
				ng-click='$ctrl.submitEventDetail()'
				ng-disabled="eventDetailFrm.eventTitle.$dirty && eventDetailFrm.eventTitle.$invalid || 
					eventDetailFrm.eventStart.$dirty && eventDetailFrm.eventStart.$invalid || 
					eventDetailFrm.eventEnd.$dirty && eventDetailFrm.eventEnd.$invalid || 
					eventDetailFrm.eventOwner.$dirty && eventDetailFrm.eventOwner.$invalid">Submit</button>
			<button type="button" class="btn btn-link" ng-click='$ctrl.back2Home()'>Back</button>
		</div>
	</div>
</form>